<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <template v-slot:id="{ row }">
        <el-button
          type="text"
          @click="view(row)"
        >
          {{ row.id }}
        </el-button>
      </template>
      <template
        slot="menu"
        slot-scope="scope"
      >
        <!-- <el-button
          type="text"
          size="small"
          @click="view(scope.row, scope.index)"
        >
          查看
        </el-button> -->
        <el-button
          v-if="scope.row.status === COMMENT_STATUS.NORMAL"
          type="text"
          size="small"
          @click="updateRecordState(scope.row, COMMENT_STATUS.SHIELD)"
        >
          屏蔽
        </el-button>
        <el-button
          v-else
          type="text"
          size="small"
          @click="updateRecordState(scope.row, COMMENT_STATUS.NORMAL)"
        >
          恢复
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="comment(scope.row, scope.index)"
        >
          评论管理
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="like(scope.row, scope.index)"
        >
          点赞
        </el-button>
        <el-button
          type="text"
          size="small"
          @click="commentview(scope.row, scope.index)"
        >
          评论
        </el-button>
        <el-button
          v-if="
            scope.row.publicFlag === PUBLIC_FLAG.PUBLIC &&
            scope.row.topFlag === TOPFLAG.NOTOP
          "
          type="text"
          size="small"
          @click="top(scope.row, TOPFLAG.TOP)"
        >
          置顶
        </el-button>

        <el-button
          v-if="
            scope.row.publicFlag === PUBLIC_FLAG.PUBLIC &&
            scope.row.topFlag === TOPFLAG.TOP
          "
          type="text"
          @click="top(scope.row, TOPFLAG.NOTOP)"
        >
          取消置顶
        </el-button>
        <el-button
          v-if="
            scope.row.publicFlag === PUBLIC_FLAG.PUBLIC &&
            scope.row.choiceFlag === SELECT_STATUS.NOSELECTED
          "
          type="text"
          size="small"
          @click="choice(scope.row, SELECT_STATUS.SELECTED)"
        >
          精选
        </el-button>
        <el-button
          v-if="
            scope.row.publicFlag === PUBLIC_FLAG.PUBLIC &&
            scope.row.choiceFlag === SELECT_STATUS.SELECTED
          "
          type="text"
          size="small"
          @click="choice(scope.row, SELECT_STATUS.NOSELECTED)"
        >
          取消精选
        </el-button>
      </template>
    </avue-crud>
    <commentPopup
      :id="id"
      v-model="commentVisible"
    ></commentPopup>
    <detailPopup
      :id="id"
      v-model="detailVisible"
      :type-list="typeList"
    ></detailPopup>
    <like-dialog
      :id="id"
      v-model="likeVisible"
      :action="action"
      :relative-type="CONTENT_TYPE.USER"
      @success="getList"
    ></like-dialog>
    <account-comment-dialog
      :id="id"
      v-model="accountVisible"
      :relative-type="CONTENT_TYPE.USER"
      @success="getList"
    ></account-comment-dialog>
    <pet-record-time-dialog
      :id="id"
      v-model="topVisible"
      :top-flag="topFlag"
      @success="getList"
    ></pet-record-time-dialog>
  </basic-container>
</template>

<script>
import {
  fetchList,
  updateRecordState,
  topDiary,
  choiceDiary,
} from '@/api/core/content';
import { tableOption } from '@/const/crud/content/pet-record';
import { mapGetters } from 'vuex';
import crudMixins from '@/mixins/crud';
import commentPopup from './components/commentPopup.vue';
import petRecordTimeDialog from './components/petRecordTimeDialog.vue';
import {
  COMMENT_STATUS,
  CONTENT_TYPE,
  PUBLIC_FLAG,
  TOPFLAG,
  SELECT_STATUS,
} from '@/const/type';
import { remote } from '@/api/admin/dict';
import detailPopup from './components/detailPopup.vue';
import likeDialog from '../../community-content/component/likeDialog.vue';
import accountCommentDialog from '../../community-content/component/accountCommentDialog.vue';
export default {
  name: 'manage',
  components: {
    commentPopup,
    detailPopup,
    likeDialog,
    accountCommentDialog,
    petRecordTimeDialog,
  },
  mixins: [crudMixins],
  data() {
    return {
      form: {},
      id: null,
      commentVisible: false,
      COMMENT_STATUS,
      detailVisible: false,
      accountVisible: false,
      likeVisible: false,
      topVisible: false,
      action: '',
      CONTENT_TYPE,
      PUBLIC_FLAG,
      SELECT_STATUS,
      TOPFLAG,
      diaryType: [],
      diaryTypeOther: [],
      topFlag: '',
    };
  },
  computed: {
    ...mapGetters(['permissions']),
    tableOption() {
      return tableOption(this.typeList);
    },
    typeList() {
      return [
        ...this.diaryType,
        ...this.diaryTypeOther,
        ...[
          {
            label: '随手记', // 随手记
            value: 'note_taking',
          },
        ],
      ];
    },
  },
  watch: {},
  async created() {
    await this.getDiaryType();
    await this.getDiaryTypeOther();
  },
  methods: {
    //点赞
    like(row) {
      this.likeVisible = true;
      this.action = 'like';
      this.id = row.id;
    },
    //评论
    commentview(row) {
      this.accountVisible = true;
      this.id = row.id;
    },
    view(row) {
      this.id = row.id;
      this.detailVisible = true;
    },
    async getDiaryType() {
      const { data } = await remote('diary_type');
      this.diaryType = data.data;
    },
    async getDiaryTypeOther() {
      const { data } = await remote('diary_type_other');
      this.diaryTypeOther = data.data;
    },
    updateRecordState(row, status) {
      const tip = status === COMMENT_STATUS.NORMAL ? '恢复' : '屏蔽';
      const tip1 = status === COMMENT_STATUS.NORMAL ? '可见' : '不可见';
      this.$confirm(
        `【${tip}后该宠物日记在移动用户端将${tip1}，是否确定${tip}该宠物日记？】`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        await updateRecordState({
          id: row.id,
          status,
        });
        this.$message.success(`${tip}成功`);
        this.getList(this.page, true);
      });
    },
    comment(row) {
      this.id = row.id;
      this.commentVisible = true;
    },

    //置顶
    top(row, status) {
      this.topFlag = status;
      this.id = row.id;
      if (status === TOPFLAG.NOTOP) {
        const tip =
          '取消置顶后，该内容会恢复默认排序，不再靠前展示，确定取消置顶吗？';
        this.$confirm(`${tip}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(function () {
            const params = {
              id: row.id,
              flag: status,
            };
            return topDiary(params);
          })
          .then(() => {
            this.getList();
          });
      } else {
        this.topVisible = true;
      }
    },
    choice(row, status) {
      const tip = status === SELECT_STATUS.SELECTED ? '精选' : '取消精选';
      var prompt = '';
      if (status === SELECT_STATUS.SELECTED) {
        prompt =
          '开启精选后，该日记将在尾巴圈显示“精选”标签，并赠送对应关联宠物罐头能量一次，确定加入精选吗？';
      } else {
        prompt = '取消精选将会去掉【精选】标识，确定取消精选吗？';
      }
      this.$confirm(prompt, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async () => {
        await choiceDiary([
          {
            id: row.id,
            choiceFlag: status,
          },
        ]);
        this.$message.success(`${tip}成功`);
        this.getList(this.page, true);
      });
    },
    // 列表查询
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      const timeObj = {};
      if (
        this.searchForm.searchCreateTime &&
        this.searchForm.searchCreateTime.length
      ) {
        timeObj.startPublishDate = this.searchForm.searchCreateTime[0];
        timeObj.endPublishDate = this.searchForm.searchCreateTime[1];
        // delete this.searchForm.searchCreateTime;
      }
      fetchList(
        Object.assign(
          {
            current: this.page.currentPage,
            size: this.page.pageSize,
            platform: 'tob', // 平台（C端：toc，B端：tob）
          },
          this.searchForm,
          timeObj
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    //  导出excel
    exportExcel() {
      this.downBlobFile('/app/appuser/export', this.searchForm, 'appuser.xlsx');
    },
  },
};
</script>
